<template>
    <div class="detail">
        <el-form ref="configRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="参数名称" prop="configName">
                <el-input v-model="form.configName" placeholder="请输入参数名称" />
            </el-form-item>
            <el-form-item label="参数键名" prop="configKey">
                <el-input v-model="form.configKey" placeholder="请输入参数键名" />
            </el-form-item>
            <el-form-item label="参数键值" prop="configValue">
                <el-input v-model="form.configValue" placeholder="请输入参数键值" />
            </el-form-item>
            <el-form-item label="系统内置" prop="configType">
                <el-radio-group v-model="form.configType">
                    <el-radio v-for="dict in sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <vue-ueditor-wrap v-model="form.remark" :config="ueditorConfig"></vue-ueditor-wrap>
            </el-form-item>
        </el-form>
        <div class="footer">
            <div class="">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>

        </div>
    </div>
</template>

<script setup>
import { getConfig, addConfig, updateConfig } from "@/api/system/config";
const { proxy } = getCurrentInstance();
const { sys_yes_no } = proxy.useDict("sys_yes_no");

const route = useRoute();
const router = useRouter();

const data = reactive({
    form: {},
    rules: {
        configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
        configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
        configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
    }
});

const ueditorConfig = ref({
    // 编辑器不自动被内容撑高
    autoHeightEnabled: true,
    // 初始容器高度
    initialFrameHeight: 400,
    // 初始容器宽度
    initialFrameWidth: "100%",
    UEDITOR_HOME_URL: "/ueditor/",
})

const { form, rules } = toRefs(data);

function getDetail() {
    getConfig(route.query.id).then(response => {
        form.value = response.data;
    });
}

/** 表单重置 */
function reset() {
    form.value = {
        configId: undefined,
        configName: undefined,
        configKey: undefined,
        configValue: undefined,
        configType: "Y",
        remark: undefined
    };
    proxy.resetForm("configRef");
}

function cancel() {
    router.go(-1);
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["configRef"].validate(valid => {
        if (valid) {
            if (form.value.configId != undefined) {
                updateConfig(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    cancel()
                });
            } else {
                addConfig(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    cancel()
                });
            }
        }
    });
}

onMounted(() => {
    reset()
    if (route.query.id) {
        getDetail();
    }
})
</script>

<style lang="scss" scoped>
.detail {
    padding: 32px;

    .footer {
        display: flex;
        justify-content: space-around;
    }
}
</style>